<template>
  <div class="clearfix">
    <div class="fl mr30">
      <img v-if="!dialogImageUrl" height="120" src="../../assets/images/up_data_img.png" alt="">
      <img v-else :src="dialogImageUrl" height="120" style="display: block" alt="">
      <div class="mt10 fs12" style="line-height:1;color:#999;">图片长宽比例为69:30，且不超过1000kb</div>
    </div>
    <div class="fl mr30">
      <div>
        <label class="sentimg">
          <input type="file" name="image_file" @change="gogogo($event,1000,69/30)">
        </label>
      </div>
    </div>
    <div class="fl mr30">
      <el-switch
        class="fs12"
        v-model="is_show"
        on-text="显示"
        @change="goggoin(tr_data.id)"
        off-text="隐藏">
      </el-switch>
    </div>
    <div class="fl">
      <el-button type="info" @click="sendData()">发布
      </el-button>
    </div>
  </div>
</template>

<script>
  import api from '../../assets/js/api';

  export default {
    name: "up-data",
    data() {
      return {
        imgurl: '',
        fdata: new FormData(),
        imgData: null,
        is_show: false,
        dialogImageUrl: '',
        dialogVisible: false,
        is_changebtn: false,
        is_changeimg:false,
        is_changebox: false,
        is_changein:false,
        updatalist: null,
        upimg:false
      };
    },
    props: ['tr_data'],
    mounted: function () {
      this.ready();
    },
    methods: {
      ready: function () {
        this.updatalist = this.tr_data;
        this.dialogImageUrl = this.tr_data.image;
        if (this.tr_data.is_display == 0) {
          this.is_show = false;
        } else {
          this.is_show = true;
        }
      },
      gogogo: function (obj,maxSize,imgwh) {
        console.log(obj.target.value)
        let file=obj.target.files[0]
        let that = this;
        let fileSize = file.size;
        let maxSizea=maxSize*1024;
        if (maxSizea < fileSize) {
          this.$message.error('图片过大！');
          obj.target.value='';
          return false;
        } else {
            let reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (theFile) {
              var image = new Image();
              image.src = theFile.target.result;
              image.onload = function () {
                let wh = this.width / this.height;
                if (wh != imgwh) {
                  that.$message.error('图片长宽比例不合适！');
                  obj.target.value='';
                  return false;
                } else {
                  that.fdata.append("image_file", obj.target.files[0]);
                  that.dialogImageUrl = getObjectURL(obj.target.files[0]);
                  function getObjectURL(imgobj) {
                    var url = null;
                    if (window.createObjectURL != undefined) {
                      url = window.createObjectURL(imgobj)
                    } else if (window.URL != undefined) {
                      url = window.URL.createObjectURL(imgobj)
                    } else if (window.webkitURL != undefined) {
                      url = window.webkitURL.createObjectURL(imgobj)
                    }
                    return url
                  };
                  that.is_changeimg = true;
                  if (this.is_show == false) {
                    that.tr_data.is_display=0;
                  } else {
                    that.tr_data.is_display=1;
                  }
                  that.fdata.append('is_display', that.tr_data.is_display);
                }
              };
            }
        }
      },
      goggoin: function () {
        if (this.is_show == false) {
          this.tr_data.is_display=0;
        } else {
          this.tr_data.is_display=1;
        }
        this.fdata.append('is_display', this.tr_data.is_display);
        this.is_changebox=!this.is_changebox;
        if (this.is_changein != this.is_changebox) {
          this.is_changebtn = true;
        }else{
          this.is_changebtn=false;
        }
      },
      sendData: function () {
        if (this.tr_data.image == '') {
          if((this.upimg ==false && this.is_changebtn == true) || (this.upimg ==false &&this.is_changeimg==true)){
            this.upimg=true;
            api.fetch('/api/admin/banners', {
              method: 'post',
              data: this.fdata
            })
              .then(res => {
                if(res.data.id){
                  this.is_changebtn = false;
                  this.is_changeimg=false;
                  this.is_changebox=false;
                  this.tr_data.id=res.data.id;
                  this.tr_data.image=res.data.image;
                  this.$message({
                    message: '发布成功',
                    type: 'success'
                  });
                }
              }).catch();
          }else{
            this.$message.error('无改变操作！');
          }
        } else {
          if (this.is_changebtn == true || this.is_changeimg ==true ) {
            api.fetch('/api/admin/banners/' + this.tr_data.id, {
              method: 'post',
              data: this.fdata
            })
              .then(res => {
                this.is_changebtn = false;
                this.is_changeimg=false;
                this.is_changebox=false;
                this.$message({
                  message: '发布成功',
                  type: 'success'
                });
              }).catch();
          } else {
            this.$message.error('无改变操作！');
          }
        }
      },
      test_img: function (file, maxSize, imgwh) {

      },
    }
  }
</script>

<style scoped>
  .clearfix {
    padding: 15px 0;
  }

  .clearfix .fl {
    line-height: 120px;

  }

  .sentimg {
    width: 120px;
    height: 120px;
    background: #f5f5f5;
    display: block;
    overflow: hidden;
    position: relative;
  }

  .sentimg input {
    opacity: 0;
  }

  .sentimg:after {
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    background: #555;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -15px;
    margin-top: -1px;
  }

  .sentimg:before {
    content: '';
    display: block;
    height: 30px;
    width: 2px;
    background: #555;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -15px;
    margin-left: -1px;
  }
</style>
